<template>
	<view class="box-c d-ai-c">
		<view class="bg-1 mt-2">
			<view class="box d-jc-sb d-ai-c">
				<view class="box title d-ai-c">
					<text>
						申请类型
					</text>
					<!-- <text>
						仅退款(无需退换货)
					</text> -->
					<picker class="ml--1" @change="bindPickerChange2" :value="index2" :range="array2">
						<view class="uni-input">{{array2[index2]}}</view>
					</picker>
				</view>
				<view class="box d-jc-c">
					<text class="iconfont iconqianjin">
					</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="box d-jc-sb d-ai-c">
				<view class="box title d-ai-c d-ac-sa">
					<text>
						申请原因
					</text>
					<picker class="ml--1" @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>

				<view class="box d-jc-c">
					<text class="iconfont iconqianjin">
					</text>
				</view>
			</view>
			<view class="line"></view>
			<view class="box-c">
				<view class="box title">
					<text>
						退款说明
					</text>
				</view>
				<view class="box">
					<textarea v-model="refound.refundRemark" class="textarea m-1" placeholder="请填写补充说明，有利于您的退款售后哦~"
						auto-height />

				</view>
			</view>
			<view class="box-c">
				<view class="box title">
					<text>
						上传图片
					</text>
				</view>
				<view class="box refond-image d-f-wrap mt-2">
					<view class="image-url mx-1" v-for="(item,index3) in imageUrl" :key='index3'>
						<image @tap='previewImg(index3)' :src="item" mode="aspectFill"></image>
						<text @tap='delImage(index3)' class="iconfont iconcha"></text>
					</view>
					<view class="add-image box d-jc-c d-ai-c" @tap='upImage'>
						<image src="../../static/images/refound/sc@2x.png"></image>
					</view>
				</view>
			</view>


		</view>
		<view class="bg-1 mt-2">
			<view class="">
				选择退款商品
			</view>
			<view class="line"></view>
			<view class="">
				<view class="box content d-ai-c my-2 " :class="item.verificationStatus==0?'':'img-gray'"
					v-for="(item,index) in orderInfo.goodSkuDto">
					<view class="flex-1 ">
						<text class="iconfont"
							:class="(checkedArr.indexOf(item.goodsId)>=0) || item.verificationStatus!=0 ?'icon-dui':'icon-quan'"
							@tap='chooseChecked(item)'></text>
					</view>
					<view class="flex-8 box ml-1 " :class="item.verificationStatus==0?'':'text-line'">
						<view class="box d-jc-c ">
							<image :src="item.image" mode=""></image>
						</view>
						<view class="box-c d-jc-sb ml-1">
							<text class="title1">{{item.goodsName}}</text>
							<text class="text-pink">{{item.goodsPrice}}积分</text>
						</view>
					</view>
					<view class="flex-1 box" :class="item.verificationStatus==0?'':'text-line'">
						<text class="number">x{{item.number}}</text>

					</view>
				</view>
			</view>

		</view>
		<view class="bottom box d-jc-c" @tap="ordersRefund">
			<text>确认申请</text>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: '',
				checkedArr: [],
				array: ['我不想要了', '买错了/已经重复下单'],
				array2: ['仅退款(无需退换货)', '退货退款'],
				index: 0,
				index2: 0,
				imageUrl: [],
				pushImageUrl: [],
				refound: {
					orderNumber: this.orderNumber,
					refundRemark: '',
					refundType: '',
					refundCause: '',
					refundImage: '',
					goodsId: []

				},
				orderNumber: ''

			}
		},
		onLoad(parameter) {
			this.orderNumber = parameter.orderNumber
			this.getOrdersInfo(parameter.orderNumber)
			// this.getOrdersInfo('21062515201566983943')
		},
		methods: {
			// 预览图片多张
			previewImg(index) {
				let _this = this;
				// #ifdef MP
				uni.previewImage({
					current: index - 1,
					urls: _this.imageUrl,
					indicator: 'number',
					loop: true
				});
				// #endif

				// #ifndef MP
				uni.previewImage({
					current: index - 1,
					urls: _this.imageUrl,
					indicator: 'number',
					loop: true
				});
				// #endif

			},
			ordersRefund() {
				this.refound.orderNumber = this.orderNumber
				this.refound.refundType = this.index + 1
				this.refound.refundCause = this.index2 + 1
				this.refound.refundImage = JSON.stringify(this.pushImageUrl)
				this.refound.goodsId = this.checkedArr
				this.$api.ordersRefund(this.refound).then(res => {
						if (res.data.success) {
							uni.navigateBack(1)
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 1000,
								icon: "none"
							});
						}

				})

		},
		upImage() {
			let _this = this
			let url = 'https://app.xiangban365.com/app_mobile/upload/file'
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: function(res) {
					_this.imageUrl = _this.imageUrl.concat(res.tempFilePaths);
					uni.uploadFile({
						url: url, //仅为示例，非真实的接口地址
						// url: "http://111.229.135.6:8001/upload/file", //仅为示例，非真实的接口地址
						filePath: res.tempFilePaths[0],
						name: 'file',
						header: {
						},
						success: function(uploadFileRes) {
							let data = JSON.parse(uploadFileRes.data)
							console.log(data.dataMap)
							_this.image = data.dataMap
							_this.pushImageUrl = _this.pushImageUrl.concat(_this.image);
							console.log("------" + _this.image)
						}
					});

				},
				fail: err => {
					console.log('选择图片失败！')
					// #ifdef APP-PLUS
					if (plus.os.name == 'iOS') {
						var PHPhotoLibrary = plus.ios.importClass('PHPhotoLibrary')
						var PHAuthorizationStatus = PHPhotoLibrary.authorizationStatus()
						if (PHAuthorizationStatus != 3) {
							uni.showModal({
								content: '需要访问您的相册，请在设置里开启',
								confirmText: '设置',
								success: res => {
									if (res.confirm) {
										plus.runtime.openURL('app-settings://')
									}
								}
							});
						}
					}
					// #endif
					console.log(JSON.stringify(err))
				}
			});
		},
		delImage(index) {
			this.imageUrl.splice(index, 1)
			this.pushImageUrl.splice(index, 1)
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.index = e.target.value
		},
		bindPickerChange2: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.index2 = e.target.value
		},
		chooseChecked(item) {
			if (item.verificationStatus == 1) {
				uni.showToast({
					title: '订单已被核销,无法申请',
					duration: 1000,
					icon: "none"
				});
				return
			}
			if (item.verificationStatus == 2) {
				uni.showToast({
					title: '订单已被退款,无法申请',
					duration: 1000,
					icon: "none"
				});
				return
			}
			let i = this.checkedArr.indexOf(item.goodsId);
			console.log(i)
			if (i >= 0) {
				this.checkedArr.splice(i, 1)
			} else {
				this.checkedArr.push(item.goodsId)
			}

			console.log(JSON.stringify(this.checkedArr))

		},
		getOrdersInfo(orderNumber) {
			this.$api.getOrdersInfo({
				orderNumber: orderNumber
			}).then((res) => {
				if (res.data.success) {
					this.orderInfo = res.data.dataMap

				} else {

				}

			})
		}

	}
	}
</script>

<style lang="less" scoped>
	page {
		height: 100%;
		background-color: #f8f8f8;
	}

	.refond-image {
		image {
			height: 140rpx;
			width: 140rpx;
		}

		.image-url {
			position: relative;

			.iconcha {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				color: #ffffff;
				background-color: rgba(0, 0, 0, 0.8);
				height: 30rpx;
				width: 30rpx;
				text-align: center;
				font-size: 22rpx;
				line-height: 30rpx;
				border-radius: 50rpx;

				image {
					height: 88rpx;
					width: 100rpx;
					border-radius: 10rpx;
				}
			}
		}

		.add-image {
			width: 160rpx;
			height: 160rpx;
			background-color: #F8F8F8;

			image {
				height: 88rpx;
				width: 100rpx;
				border-radius: 10rpx;
			}
		}
	}


	.ml--1 {
		margin-left: -25rpx;
	}

	.bottom {
		width: 100%;
		height: 100rpx;
		background-color: #FF5551;
		position: absolute;
		bottom: 0rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #fff;
	}

	.line {
		width: 650rpx;
		height: 3rpx;
		background-color: #EEEEEE;
		margin: 10rpx auto;
	}

	.bg-1 {
		padding: 20rpx;
		width: 650rpx;
		min-height: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;

		.textarea {
			width: 600rpx;
			background-color: #F8F8F8;
			min-height: 110rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			padding: 25rpx 20rpx;
		}

		.icon-quan {
			font-size: 30rpx;
		}

		.title1 {
			font-size: 30rpx;
			color: #333;
			font-weight: bold;
		}

		.content {
			.text-line {
				text {
					text-decoration: line-through
				}
			}

			.icon-dui {
				color: #FF5551 !important;
			}

			.number {
				color: #666666;
				font-size: 30rpx;
				width: 100rpx;
				text-align: end;
				margin-top: 55rpx;
			}

			image {
				width: 128rpx;
				height: 128rpx;
				border-radius: 10rpx;
			}

			view:nth-child(1) {
				text {
					font-size: 42rpx;
					color: #CCCCCC;
				}

			}
		}

		.iconqianjin {
			font-size: 24rpx;
		}

		.title {
			text:first-child {
				width: 140rpx;
				color: #666666;
				font-size: 28rpx;
			}

			text:nth-child(2) {
				width: 300rpx;
				color: #333333;
				font-size: 30rpx;
			}
		}
	}
</style>
